import createEditor from './editor'
import background from './better.png'
import './global.css'

const editor = createEditor()
document.body.appendChild(editor)

const img = new Image()
img.src = background
document.body.appendChild(img)

// ============ 以下用于处理 HMR，与业务代码无关 ============

// console.log(createEditor)

if (!module.hot) return
// 还需要将创建的元素记录下来，否则下一次热替换就找不到这次创建的元素
let lastEditor = editor

/**
 * 注册当某个模块更新后的处理函数
 * @param {string} 依赖模块的路径
 * @param {fn} 依赖路径更新后的处理函数
 */
module.hot.accept('./editor.js', () => {
  console.log('editor更新了')

  /**
   * editor 模块更新后这里的函数也更新为了最新内容
   * 由于使用createEditor函数创建了界面元素，一旦模块更新，界面上的元素也应该被重新创建
   * 还需要将创建的元素记录下来，否则下一次热替换就找不到这次创建的元素
   */
  // console.log(createEditor)
  // 因此我们需要先移除元素重新创建，再次调用 createEditor 函数将元素追加到页面中
  // document.body.removeChild(editor)

  // 替换原来的元素之前要先保留原先的数据，否则修改 js 后会把原来的元素删掉
  const value = lastEditor.innerHTML
  document.body.removeChild(lastEditor)
  const newEditor = createEditor()
  // 将记录的数据放进新创建的数据中
  newEditor.innerHTML = value
  document.body.appendChild(newEditor)
  lastEditor = newEditor
})

/**
 * 处理图片热替换
 */
module.hot.accept('./better.png', () => {
  img.src = background
  console.log(background)
})